<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container {
            margin: 0 auto;
            width: 750px;
            height: 500px;
            border: 1px solid red;
            position: relative;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-size: 750px 450px;
        }
        .clip { 
            width: 50px;
            height: 50px;
            position: absolute;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-position: -100px -0px;
            background-size: 750px 450px;
            top: 0px;
            left: 0px;
            z-index: 99;
        }
        .black {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
            top: 0px;
            left: 100px;
        }
        .swiper {
            width: 50px;
            height: 50px;
            background-color: brown;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 450px;
            border-radius: 10px;
        }
        .refresh {
            width: 50px;
            height: 50px;
            position: absolute;
            background-image: url(./images/refresh.png);
            background-size: 50px 50px;
            top: 450px;
            right: 0px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="clip">
        </div>
        <div class="black">
        </div>
        <div class="swiper">
            滑动
        </div>
        <div class="refresh">
        </div>
    </div>
    <script>
        class SlideValidation{
            constructor(containerEle,imgArr,cb){
                this.containerEle = containerEle ; 
                this.imgArr = imgArr ; 
                this.cb = cb ; 
                this.clipEle = this.containerEle.querySelector('.clip');
                this.blackEle = this.containerEle.querySelector('.black');
                this.swiperEle = this.containerEle.querySelector('.swiper');
                this.refreshEle = this.containerEle.querySelector('.refresh');
                this.resetEle();
                this.refresh();
                this.swiper();
            }
            getClip(ele1,ele2){
                let w1 = parseInt(getStyle(ele1,"width"));
                let h1 = parseInt(getStyle(ele1,"height"));
                let w2 = parseInt(getStyle(ele2,"width"));
                let h2 = parseInt(getStyle(ele2,"height"));
                let ranX = getRand( w1 - w2 , w2 ) ;
                let ranY = getRand( h1 - h2 * 2 , 0 );
                return [ranX,ranY] ;
            }
            resetEle(){
                let src = this.imgArr[getRand( this.imgArr.length - 1 , 0 )];
                let arr = this.getClip(this.containerEle,this.blackEle);

                this.containerEle.style.backgroundImage = `url(./${src})` ; 
                this.clipEle.style.backgroundImage = `url(./${src})` ; 

                this.blackEle.style.left = arr[0] + "px" ; 
                this.blackEle.style.top = arr[1] + "px" ;

                this.clipEle.style.top = arr[1] + "px" ; 
                this.clipEle.style.backgroundPosition = `-${arr[0]}px -${arr[1]}px` ;

                this.clipEle.style.left = "0px" ; 
                this.swiperEle.style.left = "0px" ; 
            }
            refresh(){
                this.refreshEle.onclick = () => {
                    this.resetEle();
                }
            }
            swiper(){
                let _that = this ; 
                this.swiperEle.onmousedown = function(){
                    let x = _that.containerEle.offsetLeft ; 
                    document.onmousemove = function (event){
                        let e = event || window.event ; 
                        let mouseX = e.clientX ; 
                        _that.clipEle.style.left = mouseX - x + "px" ; 
                        _that.swiperEle.style.left = mouseX - x + "px" ; 
                    }
                    document.onmouseup = function (){
                        document.onmousemove = '' ;
                        let xx = parseInt(_that.clipEle.style.left) ; 
                        let ax = parseInt(_that.blackEle.style.left) ;
                        if( Math.abs( xx - ax ) <= 2 ){
                            _that.cb();
                        } 
                    }
                }
            }
        }
        let containerEle = document.querySelector('.container');
        let imgArr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"] ;
        new SlideValidation(containerEle,imgArr,function(){
            alert("验证成功！")
            window.location.href = "http://www.baidu.com"
        });
        function getRand(max,min){
            return parseInt( Math.random() * ( max - min + 1 ) + min);
        }
        function getStyle(ele,styleName){
            if( window.getComputedStyle ){
                return getComputedStyle(ele,'null')[styleName] ; 
            } else {
                return ele.currentStyle[styleName] ; 
            }
        }
    </script>
</body>
</html>